<template>
  <div class="company-selector">
    <div class="demo-type">
      <div>
        <div class="select-wrapper">
          <a-select 
            v-model:value="selectedCompanies.first" 
            placeholder="请选择公司" 
            @change="handleCompanyChange"
            class="custom-select select-first"
          >
            <a-select-option
              v-for="company in companyList"
              :key="company.id"
              :value="company.id">
              {{ company.name }}
            </a-select-option>
          </a-select>
        </div>
        <a-avatar
          :src="getCompanyLogo(firstCompany)"
          :alt="firstCompany.name"
        />
        <div class="company-name">{{ firstCompany.name }}</div>
      </div>
      <div>
        <div class="select-wrapper">
          <a-select 
            v-model:value="selectedCompanies.second" 
            placeholder="请选择公司" 
            @change="handleCompanyChange"
            class="custom-select select-second"
          >
            <a-select-option
              v-for="company in companyList"
              :key="company.id"
              :value="company.id">
              {{ company.name }}
            </a-select-option>
          </a-select>
        </div>
        <a-avatar
          :src="getCompanyLogo(secondCompany)"
          :alt="secondCompany.name"
        />
        <div class="company-name">{{ secondCompany.name }}</div>
      </div>
      <div>
        <div class="select-wrapper">
          <a-select 
            v-model:value="selectedCompanies.third" 
            placeholder="请选择公司" 
            @change="handleCompanyChange"
            class="custom-select select-third"
          >
            <a-select-option
              v-for="company in companyList"
              :key="company.id"
              :value="company.id">
              {{ company.name }}
            </a-select-option>
          </a-select>
        </div>
        <a-avatar
          :src="getCompanyLogo(thirdCompany)"
          :alt="thirdCompany.name"
        />
        <div class="company-name">{{ thirdCompany.name }}</div>
      </div>
    </div>
  </div>
</template>
// ... existing code ...
<script setup>
import { ref, reactive, onMounted, computed, defineEmits } from 'vue'
import { CampatydataApi } from '../utils/api'
import apiConfig from '../utils/apiConfig'

// 定义事件发射器
const emit = defineEmits(['companyChange'])

// 公司列表数据
const companyList = ref([])

// 选中的公司ID
const selectedCompanies = reactive({
  first: '',
  second: '',
  third: ''
})

// 计算属性：获取选中的公司对象
const firstCompany = computed(() => {
  return companyList.value.find(company => company.id === selectedCompanies.first) || { id: '', name: '' }
})

const secondCompany = computed(() => {
  return companyList.value.find(company => company.id === selectedCompanies.second) || { id: '', name: '' }
})

const thirdCompany = computed(() => {
  return companyList.value.find(company => company.id === selectedCompanies.third) || { id: '', name: '' }
})

// 获取公司Logo的函数
const getCompanyLogo = (company) => {
  // 如果公司有logo_url字段，使用logo_url
  if (company && company.logo_url) {
    // 如果logo_url已经是完整URL，则直接返回
    if (company.logo_url.startsWith('http')) {
      return company.logo_url;
    }
    // 否则加上基础URL
    const baseUrl = apiConfig.imageBaseURL.development;
    // 处理路径中的重复斜杠
    if (company.logo_url.startsWith('/')) {
      return baseUrl + company.logo_url;
    } else {
      return baseUrl + '/' + company.logo_url;
    }
  }
  // 如果没有logo_url，返回空字符串
  return ''
}

// 处理公司选择变化
const handleCompanyChange = () => {
  // 选择变化后会自动更新头像，因为使用了计算属性
  // 发送事件通知父组件公司选择已更改
  const companyData = {
    first: firstCompany.value,
    second: secondCompany.value,
    third: thirdCompany.value
  }
  console.log('发送 companyChange 事件:', companyData)
  emit('companyChange', companyData)
  console.log('companyChange 事件发送完成')
}

// 获取公司列表数据
const fetchCompanies = async () => {
  try {
    const response = await CampatydataApi.getCampatyDataList()
    companyList.value = response.data || response
    
    // 默认选中前三家公司
    if (companyList.value.length > 0) {
      selectedCompanies.first = companyList.value[0].id
    }
    if (companyList.value.length > 1) {
      selectedCompanies.second = companyList.value[1].id
    }
    if (companyList.value.length > 2) {
      selectedCompanies.third = companyList.value[2].id
    }
    
    // 初始化时发送一次事件
    setTimeout(() => {
      handleCompanyChange()
    }, 0)
  } catch (error) {
    console.error('获取公司列表失败:', error)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCompanies()
})
</script>
// ... existing code ...


<style scoped>
.company-selector {
  margin-bottom: 20px;
}

.demo-type {
  display: flex;
}

.demo-type > div {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-wrapper {
  width: 100%;
  max-width: 150px;
  margin: 0 auto 20px;
}

:deep(.custom-select .ant-select-selector) {
  border-radius: 20px !important;
  border: 1px solid #dcdfe6 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease;
}

:deep(.select-first .ant-select-selector) {
  background-color: rgb(255, 123, 0) !important;
}

:deep(.select-second .ant-select-selector) {
  background-color: rgb(30, 111, 199) !important;
}

:deep(.select-third .ant-select-selector) {
  background-color: rgb(39, 174, 96) !important;
}

:deep(.custom-select:hover .ant-select-selector) {
  border-color: #409eff !important;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2) !important;
}

:deep(.custom-select .ant-select-selection-placeholder) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.custom-select .ant-select-selection-item) {
  color: white !important;
  font-weight: 500;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.company-name {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>